<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>visual-ui__time-axis-player</title>
    <script
      type="text/javascript"
      src="https://unpkg.zhimg.com/vue@2.6.12/dist/vue.js"
    ></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.zhimg.com/element-ui@2.15.6/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui@2.15.6/lib/index.js"></script>
    <script type="text/javascript" src="../dist/tn-element-ui.js"></script>
    <style>
      .client-area {
        background: rgba(0, 0, 0, 0.05);
      }
    </style>
  </head>

  <body class="tn-background-normal">
    <div id="app" class="tn-absolute-fit tn-flex-box" direction="column">
      <h2>time-axis-player</h2>
      <hr />
      <el-form :inline="true" :model="formInline" class="tn-flex-box">
        <el-form-item label="默认展示">
          <el-switch
            v-model="timeAxisPlayerVisible"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="formInline.rangeStart"
            type="date"
            format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="formInline.rangeEnd"
            type="datetime"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div size="1" style="background: #333; padding-top: 40px;border: 4px solid #4aaaef;">
        <tn-time-axis-play-bar
          :visible.sync="timeAxisPlayerVisible"
          :range-start="formInline.rangeStart"
          :range-end="formInline.rangeEnd"
          v-on:load-date="loadDate"
        ></tn-time-axis-play-bar>
      </div>
    </div>

    <script type="text/javascript">
      var app = new Vue({
        el: "#app",
        data () {
          return {
            formInline: {
              rangeStart: new Date(),
              rangeEnd: undefined
            },
            timeAxisPlayerVisible: true,
          }
        },
        methods: {
          loadDate (data) {
            console.log('[loadDate]', data)
          }
        }
      });
    </script>
  </body>
</html>
